<template>
    <el-dialog v-model="dialogVisible" title="" width="1680" :close-on-click-modal="false">
        <div class="person-dialog">
            <div class="person-left">
                <div class="title">旅客基本信息</div>
                <p>姓名：张三</p>
                <p>国籍：中国</p>
                <p>年龄：20</p>
                <p>性别：男</p>
                <p>性别：男</p>
                <p>证件号码：44003199908239899</p>
                <div class="tags">
                    <span class="tag">身份证标签</span>
                    <span class="tag">身份证标签</span>
                    <span class="tag">身份证标签</span>
                    <span class="tag">身份证标签</span>
                </div>
            </div>
            <div class="person-center">
                <PersonSVG></PersonSVG>
            </div>
            <div class="person-right">
                <!-- 风险信息 -->
                <div class="risk-box">
                    <div class="title">风险信息</div>
                    <el-row>
                        <el-col :span="12" @click="onRiskList">
                            <img src="@/assets/large-screen/icon-normal.png" alt="正常" class="icon">
                            <div class="text">风险匹配名单</div>
                        </el-col>
                        <el-col :span="12" @click="onRiskList">
                            <img src="@/assets/large-screen/icon-warning.png" alt="异常" class="icon">
                            <div class="text warning">申报异常</div>
                        </el-col>
                        <el-col :span="12" @click="onRiskList">
                            <img src="@/assets/large-screen/icon-normal.png" alt="正常" class="icon">
                            <div class="text">高频次出入境</div>
                        </el-col>
                        <el-col :span="12" @click="onRiskList">
                            <img src="@/assets/large-screen/icon-normal.png" alt="正常" class="icon">
                            <div class="text">免税额度超额</div>
                        </el-col>
                    </el-row>
                </div>

                <!-- 查验记录 -->
                <div class="check-box">
                    <div class="check-title">查验记录</div>
                    <CheckTimeline></CheckTimeline>
                </div>

            </div>
        </div>

    </el-dialog>

    <RiskListDialog ref="riskListDialog"></RiskListDialog>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import RiskListDialog from './RiskListDialog.vue'
import CheckTimeline from './CheckTimeline.vue'
import PersonSVG from './PersonSVG.vue'


const dialogVisible = ref(false)
const riskListDialog = ref()
const keyword = ref('')

function onRiskList(){
    riskListDialog.value.openByView(keyword.value)
}

function openByView(input: string) {
    dialogVisible.value = true
    keyword.value = input;
}

defineExpose({
    openByView
})  
</script>


<style lang="less">
@import url(./person-dialog.less);
</style>